<template>
    <el-card>
        <template #header>
          <div class="card-header">
            <el-button type="primary" @click="handleAdd">编辑</el-button>
          </div>
        </template>
        <el-table
          :data="store.content"
          border
          style="width: 100%; box-sizing: border-box;"
        >
          <el-table-column prop="project_name" label="名称" />
          <el-table-column prop="category" label="分类" />
          <el-table-column prop="origin" label="起源地点" />
          <el-table-column prop="characteristics" label="艺术特点" />
          <el-table-column prop="representative_artists" label="代表性传承人" />
          <el-table-column prop="popular_regions" label="流行地区" />
          <el-table-column label="操作" fixed="right">
            <template #default="scope">
              <el-button
                type="warning"
                size="small"
                @click="handleEdit(scope.row.id)"
              >
                修改
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="handleDelete(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-size="7"
          :pager-count="5"
          layout="prev, pager, next"
          :total="store.total"
          @current-change="handleCurrentChange"
        />
      </el-card>
      <!-- 添加编辑对话框 -->
      <el-dialog
        v-model="store.dialogVisible"
        title="编辑非遗项目"
        width="40%"
      >
        <el-form :model="store.formData">
          <el-form-item label="项目名称">
            <el-input v-model="store.formData.project_name" />
          </el-form-item>
          <el-form-item label="分类">
            <el-input v-model="store.formData.category" />
          </el-form-item>
          <el-form-item label="子分类">
            <el-input v-model="store.formData.sub_category" />
          </el-form-item>
          <el-form-item label="项目描述">
            <el-input v-model="store.formData.description" type="textarea" />
          </el-form-item>
          <el-form-item label="起源地点">
            <el-input v-model="store.formData.origin" />
          </el-form-item>
          <el-form-item label="艺术特点">
            <el-input v-model="store.formData.characteristics" type="textarea" />
          </el-form-item>
          <el-form-item label="代表性传承人">
            <el-input v-model="store.formData.representative_artists" />
          </el-form-item>
          <el-form-item label="传承方式">
            <el-input v-model="store.formData.inheritance_mode" />
          </el-form-item>
          <el-form-item label="流行地区">
            <el-input v-model="store.formData.popular_regions" />
          </el-form-item>
          <el-form-item label="相关节日">
            <el-input v-model="store.formData.related_festivals" />
          </el-form-item>
          <el-form-item label="保护级别">
            <el-input v-model="store.formData.protection_level" />
          </el-form-item>
          <el-form-item label="保护单位">
            <el-input v-model="store.formData.protection_unit" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="store.dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitForm">确定</el-button>
          </span>
        </template>
      </el-dialog>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useHeritageStore } from '../stores/counter'
import config from '../../config'
const store = useHeritageStore()

const props=defineProps(["urlPrefix"])

onMounted(() => {
  store.fetchHeritageData(config.API_HOST+`/${props.urlPrefix}/heritage_projects`)
})
const handleCurrentChange = (val) => {
  store.handleCurrentChange(val)
}
const handleEdit = (id) => {
  store.handleEdit(id)
}
const handleAdd = () => {
  store.handleAdd()
}
const handleDelete = (id) => {
  store.handleDelete(config.API_HOST+`/${props.urlPrefix}/heritage_projects`, id)
}
const submitForm = () => {
  store.submitForm(config.API_HOST+`/${props.urlPrefix}/heritage_projects`)
}
</script>
<style scoped>
  .card-header {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
  }
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
</style>